
<template>
    <div style="height: 500px; overflow: auto;">
        <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="900px"
            wrapClassName="j-user-select-modal" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
            <a-row>
                <a-col :span="showSelected ? 18 : 24" style="height: auto; ">
                    <div style="max-height:100%;">
                        <BasicTable ref="tableRef" :columns="columns" :scroll="tableScroll" v-bind="getBindValue"
                            :useSearchForm="true" :formConfig="formConfig" :api="upkeep" :searchInfo="searchInfo"
                            :rowSelection="rowSelection" :indexColumnProps="indexColumnProps">
                            <template #tableTitle></template>
                        </BasicTable>
                    </div>
                </a-col>
            </a-row>
        </BasicModal>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, unref, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { upkeep } from '../../device/LabDevice.api';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { selectProps } from '/@/components/Form/src/jeecg/props/props';

export default defineComponent({
    name: 'ChemicalSelectModal',
    components: {
        //此处需要异步加载BasicTable
        BasicModal,
        BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
            // loading: true,
        }),
    },
    props: {
        ...selectProps,
        //选择框标题
        modalTitle: {
            type: String,
            default: '选择设备',
        },
    },
    emits: ['register', 'getSelectResult'],
    setup(props, { emit }) {
        const tableScroll = ref<any>({ x: false });
        const tableRef = ref();
        //注册弹框
        const [register, { closeModal }] = useModalInner(() => {
            if (window.innerWidth < 900) {
                tableScroll.value = { x: 900 };
            } else {
                tableScroll.value = { x: false };
            }
            setTimeout(() => {
                if (tableRef.value) {
                    tableRef.value.setSelectedRowKeys(selectValues['value'] || []);
                }
            }, 800);

        });

        const attrs = useAttrs();
        //表格配置
        const config = {
            canResize: true,//为true控制表格高度跟随框架，超出部分，滚动条显示
            bordered: true,
            size: 'small',

        };
        const selectValue=ref();
        const rowSelection = ref({
            type: 'radio', // 设置为单选模式
            onChange: onSelectChange,
        });
        const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
        const [{ visibleChange, selectValues, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows,checkedKeys }] = useSelectBiz(
            upkeep,
            getBindValue,
        );

        const searchInfo = ref(props.params);
        //查询form
        const formConfig = {
            baseColProps: {
                xs: 24,
                sm: 8,
                md: 6,
                lg: 8,
                xl: 6,
                xxl: 6,
            },
            schemas: [
                {
                    label: '设备名称',
                    field: 'devName',
                    component: 'JInput',
                },
                {
                    label: '班组',
                    field: 'team',
                    component: 'JInput',
                },
            ],
        };
        //定义表格列
        const columns = [
            {
                title: '设备名称',
                dataIndex: 'devName',
                width: 40,
                align: 'center',
            },
            {
                title: '设备自编号',
                dataIndex: 'devNumber',
                width: 40,
                align: 'center',
            },
            {
                title: '班组',
                dataIndex: 'team',
                width: 40,
                align: 'center',
            },
            {
                title: '所属单位',
                dataIndex: 'company',
                width: 40,
                align: 'center',
            },
            {
                title: '设备状态',
                dataIndex: 'status',
                width: 40,
                align: 'center',
            },


        ];
        //已选择的table信息
        const selectedTable = {
            pagination: false,
            showIndexColumn: false,
            scroll: { y: 390 },
            size: 'small',
            canResize: false,
            bordered: true,
            rowKey: 'id',
            columns: [],
        };

        function onSelectChange(selectedRowKeys: (string | number)[], selectRow) {
           selectValue.value=selectRow;
           
        }

        /**
         * 确定选择
         */
        function handleOk() {
            // const selectedItem = selectValues.value[0];
            // if (selectedItem) {
            //     getSelectResult([selectedItem], [selectedItem.key]);
            // }
            // closeModal();
            // getSelectResult(() => {
                //回传选项和已选择的值
                emit('getSelectResult', selectValue.value);
                //清空选中状态
                // rowSelection.selectedRowKeys.value = [];
                //关闭弹窗
                closeModal();

            // });
        }

        return {
            handleOk,
            searchInfo,
            register,
            indexColumnProps,
            visibleChange,
            getBindValue,
            upkeep,
            formConfig,
            columns,
            rowSelection,
            selectRows,
            selectedTable,
            handleDeleteSelected,
            tableScroll,
            tableRef,
        };
    },
});
</script>
<style>
/* #myTableContainer {
    height: auto;
  } */
.ant-col-sm-4 {
    display: block;
    flex: 0 0 30.66666667%;
    max-width: 30.66666667%;
}
</style>
  